<html>
	<head>
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<link type="text/css" href="css/black-tie/jquery-ui-1.8.18.custom.css" rel="stylesheet" />
		<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
		<script type="text/javascript" src="js/base.js"> </script>
		<script type="text/javascript" src="js/ejUtil.js"> </script>
		<script type="text/javascript" src="js/sjcl.js"></script>
		<script type="text/javascript" src="js/tripledes.js"></script>
		<script type="text/javascript" src="js/rabbit.js"></script>
		<script type="text/javascript" src="js/rc4.js"></script>
		<script type="text/javascript" src="js/gdocs.js"></script>
        <script type="text/javascript" src="js/chrome_ex_oauthsimple.js"></script>
        <script type="text/javascript" src="js/chrome_ex_oauth.js"></script>

		<script type="text/javascript">
			$(function(){
				//buttons
				$("input:submit, button").button();
				// Tabs
				$("#tabs").tabs({
   					select: function(event, ui) {  
						selectedTab = ui.index;			
					}
				});
				//hover states on the static widgets
				$('#dialog_link, ul#icons li').hover(
					function() { $(this).addClass('ui-state-hover'); }, 
					function() { $(this).removeClass('ui-state-hover'); }
				);
							
			});
		</script>
	</head>
	<body>
		<div id="wrapper" class="wrapper">
		<div id="tabs">
			<ul>
				<li><a href="#tabs-1">Encrypt New</a></li>
				<li><a href="#tabs-2">Update Existing</a></li>
			</ul>
			<div id="tabs-1">
				<label for="enalgo">Algorithm: </label>
				<select id="enalgo">
					<option id="aes">AES</option>
					<option id="des">DES</option>
					<option id="3des">Triple DES</option>
					<option id="rabbit">Rabbit</option>
					<option id="rc4">RC4</option>
				</select>
				<br>
				<label for="title">Title: </label>
				<br>
				<input type="text" id="title" />
				<br>
				<label for="content">Content:</label>
				<br>
				<textarea id="content"></textarea>
				<br>
				<label for="enpassword">Password: </label> 
				<br><input type="password" id="enpassword" />
				<br>
				<div id="new_error_message_div" class="ui-widget" style="margin-top:10px; display: none">
					<div class="ui-state-error ui-corner-all" style="padding: 0 .4em;"> 
					<p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
						<p id="new_error_message"></p>
					</p>
					</div>
				</div>
				<div id="create_progress_bar" style="display: none"></div>
				<div id="create_progress_text"></div>
				<div class="submit_button_div">
					<input type="submit" id="enbutton" value="Encrypt"></input>
				</div>

			</div>
			<div id="tabs-2">
				<div id="doclist">
					<div id="fetching">Fetching documents...</div>
				</div>
				<div id="editdiv">
					<textarea disabled="true" id="decontent"></textarea>
					<div id="hmacdiv" style="display:none;">
						<label for="hmac">HMAC: </label>
						<br><input type="text" disabled="true" id="hmac"/>
						<br>
					</div>
					<label for="password">Password: </label>
					<br><input type="password" id="depassword" />
					<br>
					<div id = "existing_error_message_div" class="ui-widget" style="margin-top:10px; display:none">
						<div class="ui-state-error ui-corner-all" style="padding: 0 .4em;">
						<p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
							<p id="existing_error_message"></p>
						</p>
						</div>
					</div>
					<div class="submit_button_div" >
						<input type="submit" id="debutton" value="Decrypt"></input>
					</div>
				</div>
			</div>
		</div>
		</div>
	</body>
</html>
